<template>
  <div>
    <main-head></main-head>
    <main-swiper :swiperList="swiperList"></main-swiper>
    <main-scenic :iconList="iconList"></main-scenic>
    <recommend :recommendList="recommendList"></recommend>
    <week-info :weekList="weekList"></week-info>
  </div>
</template>

<script>
import mainHead from "./components/mainHead";
import mainSwiper from "./components/mainSwiper";
import mainScenic from "./components/mainScenic";
import recommend from "./components/recommend";
import weekInfo from "./components/weekInfo";
import axios from "axios"
export default {
  name: "Main",
  components: {
    mainHead,
    mainSwiper,
    mainScenic,
    recommend,
    weekInfo
  },
  data () {
    return {
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekList : []
    }
  },
  methods: {
    getInfo () {
      axios.get("/api/index.json").
      then(this.succ)
    },
    succ (data) {
      const dataInfo = data.data
      if(dataInfo.ret && dataInfo.data){ 
        const result = dataInfo.data
        this.swiperList = result.swiperList
        this.iconList = result.iconList
        this.recommendList = result.recommendList
        this.weekList = result.weekendList
      }
      console.log(dataInfo)
    }
  },
   mounted () {
     this.getInfo()
   }
};
</script>

<style>

</style>